<!-- Description -->
<section id="description" class="card">
    <div class="card-header">
        <h4 class="card-title">Description</h4>
    </div>
    <div class="card-content">
        <div class="card-body">
            <div class="card-text">
                <p>Dark color horizontal navigation with custom dark color options. In this page you can experience it. If you want to create a dark color horizontal navigation use the following customization options.</p>
                <div class="alert bg-success alert-icon-left mb-2" role="alert">
                    <span class="alert-icon"><i class="la la-pencil-square"></i></span>
                    <strong>Experience it!</strong>
                    <p>This page has dark horizontal navbar & examples below, You can also check horizontal layout templates dark navigation example to experience it live. <a href="https://pixinvent.com/modern-admin-clean-bootstrap-4-dashboard-html-template/html/ltr/horizontal-menu-template/horizontal-nav-dark.html" class="white">horizontal-nav-dark.html</a></p>
                </div>
            </div>
        </div>
    </div>
</section>
<!--/ Description -->
<!-- Example -->
<section id="examples" class="card">
    <div class="card-header">
        <h4 class="card-title">Examples</h4>
        <a class="heading-elements-toggle"><i class="la la-ellipsis-v font-medium-3"></i></a>
        <div class="heading-elements">
            <ul class="list-inline mb-0">
                <li><a data-action="collapse"><i class="ft-minus"></i></a></li>
                <li><a data-action="reload"><i class="ft-rotate-cw"></i></a></li>
                <li><a data-action="close"><i class="ft-x"></i></a></li>
            </ul>
        </div>
    </div>
    <div class="card-content">
        <div class="card-body">
            <div class="card-text">
                <p>Classic white</p>
                <div class="header-navbar navbar-expand-sm menu-icon-right navbar navbar-horizontal navbar-dark navbar-shadow border-grey border-darken-2">
                    <!-- Horizontal menu content-->
                    <div data-menu="menu-container" class="horizontal-menu navbar-container ml-0">
                        <ul data-menu="menu-navigation" class="nav navbar-nav">
                            <li class="nav-item"><a href="index.html" class="nav-link"><i class="la la-home font-medium-2"></i><span>Dashboard</span></a></li>
                            <li data-menu="megamenu" class="dropdown mega-dropdown nav-item"><a href="#" data-toggle="dropdown" class="dropdown-toggle nav-link"><i class="la la-tv"></i><span>Mega Menu</span></a>
                                <ul class="dropdown-menu row">
                                    <li data-mega-col="col-md-3" class="col-md-3">
                                        <ul class="drilldown-menu">
                                            <li class="menu-list">
                                                <ul class="mega-menu-sub">
                                                    <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>First Link col-1</a>
                                                    </li>
                                                    <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>Second Link col-1 link</a>
                                                        <ul class="mega-menu-sub">
                                                            <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>submenu level 2</a>
                                                            </li>
                                                            <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>submenu level 2</a>
                                                            </li>
                                                            <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>submenu level 2 link</a>
                                                                <ul class="mega-menu-sub">
                                                                    <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>submenu level 3</a>
                                                                    </li>
                                                                    <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>submenu level 3</a>
                                                                    </li>
                                                                    <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>submenu level 3</a>
                                                                    </li>
                                                                    <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>submenu level 3</a>
                                                                    </li>
                                                                </ul>
                                                            </li>
                                                            <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>submenu level 2</a>
                                                            </li>
                                                        </ul>
                                                    </li>
                                                    <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>Third Link col-1</a>
                                                    </li>
                                                    <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>Fourth Link col-1</a>
                                                    </li>
                                                </ul>
                                            </li>
                                        </ul>
                                    </li>
                                    <li data-mega-col="col-md-3" class="col-md-3">
                                        <h6 data-toggle="dropdown" class="dropdown-menu-header text-uppercase"><i class="la la-cog"></i>Column 2 title
                                  </h6>
                                        <ul class="drilldown-menu">
                                            <li class="menu-list">
                                                <ul class="mega-menu-sub">
                                                    <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>First Link col-2</a>
                                                    </li>
                                                    <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>Second Link col-2</a>
                                                        <ul class="mega-menu-sub">
                                                            <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>submenu level 2</a>
                                                            </li>
                                                            <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>submenu level 2</a>
                                                            </li>
                                                            <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>submenu level 2 link</a>
                                                                <ul class="mega-menu-sub">
                                                                    <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>submenu level 3</a>
                                                                        <ul class="mega-menu-sub">
                                                                            <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>submenu level 2</a>
                                                                            </li>
                                                                            <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>submenu level 2</a>
                                                                            </li>
                                                                        </ul>
                                                                    </li>
                                                                    <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>submenu level 3</a>
                                                                    </li>
                                                                    <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>submenu level 3</a>
                                                                    </li>
                                                                    <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>submenu level 3</a>
                                                                    </li>
                                                                </ul>
                                                            </li>
                                                            <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>submenu level 2</a>
                                                            </li>
                                                        </ul>
                                                    </li>
                                                    <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>Third Link col-2</a>
                                                    </li>
                                                    <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>Fourth Link col-2</a>
                                                    </li>
                                                </ul>
                                            </li>
                                        </ul>
                                    </li>
                                    <li data-mega-col="col-md-3" class="col-md-3">
                                        <h6 data-toggle="dropdown" class="dropdown-menu-header text-uppercase"><i class="la la-cog"></i>Column 3 title
                                  </h6>
                                        <ul class="drilldown-menu">
                                            <li class="menu-list">
                                                <ul class="mega-menu-sub">
                                                    <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>First Link col-3</a>
                                                    </li>
                                                    <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>Second Link col-3</a>
                                                        <ul class="mega-menu-sub">
                                                            <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>submenu level 2</a>
                                                            </li>
                                                            <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>submenu level 2</a>
                                                            </li>
                                                            <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>submenu level 2 link</a>
                                                                <ul class="mega-menu-sub">
                                                                    <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>submenu level 3</a>
                                                                    </li>
                                                                    <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>submenu level 3</a>
                                                                    </li>
                                                                    <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>submenu level 3</a>
                                                                    </li>
                                                                    <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>submenu level 3</a>
                                                                    </li>
                                                                </ul>
                                                            </li>
                                                            <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>submenu level 2</a>
                                                            </li>
                                                        </ul>
                                                    </li>
                                                    <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>Third Link col-3</a>
                                                    </li>
                                                    <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>Fourth Link col-3</a>
                                                    </li>
                                                </ul>
                                            </li>
                                        </ul>
                                    </li>
                                    <li data-mega-col="col-md-3" class="col-md-3">
                                        <h6 data-toggle="dropdown" class="dropdown-menu-header text-uppercase"><i class="la la-cog"></i>Column 4 title
                                  </h6>
                                        <ul class="drilldown-menu">
                                            <li class="menu-list">
                                                <ul class="mega-menu-sub">
                                                    <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>First Link col-4</a>
                                                    </li>
                                                    <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>Second Link col-4</a>
                                                        <ul class="mega-menu-sub">
                                                            <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>submenu level 2</a>
                                                            </li>
                                                            <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>submenu level 2</a>
                                                            </li>
                                                            <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>submenu level 2 link</a>
                                                                <ul class="mega-menu-sub">
                                                                    <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>submenu level 3</a>
                                                                    </li>
                                                                    <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>submenu level 3</a>
                                                                    </li>
                                                                    <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>submenu level 3</a>
                                                                    </li>
                                                                    <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>submenu level 3</a>
                                                                    </li>
                                                                </ul>
                                                            </li>
                                                            <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>submenu level 2</a>
                                                            </li>
                                                        </ul>
                                                    </li>
                                                    <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>Third Link col-4</a>
                                                    </li>
                                                    <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>Fourth Link col-4</a>
                                                    </li>
                                                </ul>
                                            </li>
                                        </ul>
                                    </li>
                                </ul>
                            </li>
                            <li data-menu="dropdown" class="dropdown nav-item"><a href="#" data-toggle="dropdown" class="dropdown-toggle nav-link"><i class="la la-bookmark"></i><span>My Menu</span></a>
                                <ul class="dropdown-menu">
                                    <li class=" navigation-header"><span>Main</span></li>
                                    <li data-menu=""><a href="#" data-toggle="dropdown" class="dropdown-item">Second level</a>
                                    </li>
                                    <li data-menu=""><a href="#" data-toggle="dropdown" class="dropdown-item">Second level</a>
                                    </li>
                                    <li data-menu=""><a href="#" data-toggle="dropdown" class="dropdown-item">Second level</a>
                                    </li>
                                    <li data-menu=""><a href="#" data-toggle="dropdown" class="dropdown-item">Second level</a>
                                    </li>
                                    <li data-menu=""><a href="#" data-toggle="dropdown" class="dropdown-item">Second level</a>
                                    </li>
                                    <li data-menu=""><a href="#" data-toggle="dropdown" class="dropdown-item">Second level</a>
                                    </li>
                                    <li data-menu=""><a href="#" data-toggle="dropdown" class="dropdown-item">Second level</a>
                                    </li>
                                    <li data-menu=""><a href="#" data-toggle="dropdown" class="dropdown-item">Second level</a>
                                    </li>
                                    <li data-menu=""><a href="#" data-toggle="dropdown" class="dropdown-item">Second level</a>
                                    </li>
                                    <li data-menu=""><a href="#" data-toggle="dropdown" class="dropdown-item">Second level</a>
                                    </li>
                                    <li data-menu=""><a href="#" data-toggle="dropdown" class="dropdown-item">Second level</a>
                                    </li>
                                    <li data-menu=""><a href="#" data-toggle="dropdown" class="dropdown-item">Second level</a>
                                    </li>
                                    <li data-menu=""><a href="#" data-toggle="dropdown" class="dropdown-item">Second level</a>
                                    </li>
                                    <li data-menu=""><a href="#" data-toggle="dropdown" class="dropdown-item">Second level</a>
                                    </li>
                                    <li data-menu="dropdown-submenu" class="dropdown dropdown-submenu"><a href="#" data-toggle="dropdown" class="dropdown-item dropdown-toggle">Second level with child</a>
                                        <ul class="dropdown-menu">
                                            <li data-menu=""><a href="#" data-toggle="dropdown" class="dropdown-item">Third level</a>
                                            </li>
                                            <li data-menu="dropdown-submenu" class="dropdown dropdown-submenu"><a href="#" data-toggle="dropdown" class="dropdown-item dropdown-toggle">Third level with child</a>
                                                <ul class="dropdown-menu">
                                                    <li data-menu=""><a href="#" data-toggle="dropdown" class="dropdown-item">Fourth level</a>
                                                    </li>
                                                    <li data-menu=""><a href="#" data-toggle="dropdown" class="dropdown-item">Fourth level</a>
                                                    </li>
                                                </ul>
                                            </li>
                                        </ul>
                                    </li>
                                    <li data-menu=""><a href="#" data-toggle="dropdown" class="dropdown-item">Second level</a>
                                    </li>
                                </ul>
                            </li>
                            <li data-menu="dropdown" class="dropdown nav-item"><a href="#" data-toggle="dropdown" class="dropdown-toggle nav-link"><i class="la la-circle"></i><span>Menu levels</span></a>
                                <ul class="dropdown-menu">
                                    <li data-menu=""><a href="#" data-toggle="dropdown" class="dropdown-item">Second level</a>
                                    </li>
                                    <li data-menu="dropdown-submenu" class="dropdown dropdown-submenu"><a href="#" data-toggle="dropdown" class="dropdown-item dropdown-toggle">Second level with child</a>
                                        <ul class="dropdown-menu">
                                            <li data-menu=""><a href="#" data-toggle="dropdown" class="dropdown-item">Third level</a>
                                            </li>
                                            <li data-menu="dropdown-submenu" class="dropdown dropdown-submenu"><a href="#" data-toggle="dropdown" class="dropdown-item dropdown-toggle">Third level with child</a>
                                                <ul class="dropdown-menu">
                                                    <li data-menu=""><a href="#" data-toggle="dropdown" class="dropdown-item">Fourth level</a>
                                                    </li>
                                                    <li data-menu=""><a href="#" data-toggle="dropdown" class="dropdown-item">Fourth level</a>
                                                    </li>
                                                </ul>
                                            </li>
                                        </ul>
                                    </li>
                                    <li data-menu=""><a href="#" data-toggle="dropdown" class="dropdown-item">Second level</a>
                                    </li>
                                </ul>
                            </li>
                            <li data-menu="megamenu" class="dropdown mega-dropdown nav-item"><a href="#" data-toggle="dropdown" class="dropdown-toggle nav-link"><i class="la la-tv"></i><span>Mega Menu</span></a>
                                <ul class="dropdown-menu row">
                                    <li data-mega-col="col-md-4" class="col-md-4">
                                        <h6 data-toggle="dropdown" class="dropdown-menu-header text-uppercase"><i class="la la-cog"></i>Column 2 title
                                  </h6>
                                        <ul class="drilldown-menu">
                                            <li class="menu-list">
                                                <ul class="mega-menu-sub">
                                                    <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>First Link col-2</a>
                                                    </li>
                                                    <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>Second Link col-2</a>
                                                        <ul class="mega-menu-sub">
                                                            <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>submenu level 2</a>
                                                            </li>
                                                            <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>submenu level 2</a>
                                                            </li>
                                                            <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>submenu level 2 link</a>
                                                                <ul class="mega-menu-sub">
                                                                    <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>submenu level 3</a>
                                                                    </li>
                                                                    <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>submenu level 3</a>
                                                                    </li>
                                                                    <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>submenu level 3</a>
                                                                    </li>
                                                                    <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>submenu level 3</a>
                                                                    </li>
                                                                </ul>
                                                            </li>
                                                            <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>submenu level 2</a>
                                                            </li>
                                                        </ul>
                                                    </li>
                                                    <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>Third Link col-2</a>
                                                    </li>
                                                    <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>Fourth Link col-2</a>
                                                    </li>
                                                </ul>
                                            </li>
                                        </ul>
                                    </li>
                                    <li data-mega-col="col-md-4" class="col-md-4">
                                        <h6 data-toggle="dropdown" class="dropdown-menu-header text-uppercase"><i class="la la-cog"></i>Column 3 title
                                  </h6>
                                        <ul class="drilldown-menu">
                                            <li class="menu-list">
                                                <ul class="mega-menu-sub">
                                                    <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>First Link col-3</a>
                                                    </li>
                                                    <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>Second Link col-3</a>
                                                        <ul class="mega-menu-sub">
                                                            <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>submenu level 2</a>
                                                            </li>
                                                            <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>submenu level 2</a>
                                                            </li>
                                                            <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>submenu level 2 link</a>
                                                                <ul class="mega-menu-sub">
                                                                    <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>submenu level 3</a>
                                                                    </li>
                                                                    <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>submenu level 3</a>
                                                                    </li>
                                                                    <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>submenu level 3</a>
                                                                    </li>
                                                                    <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>submenu level 3</a>
                                                                    </li>
                                                                </ul>
                                                            </li>
                                                            <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>submenu level 2</a>
                                                            </li>
                                                        </ul>
                                                    </li>
                                                    <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>Third Link col-3</a>
                                                    </li>
                                                    <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>Fourth Link col-3</a>
                                                    </li>
                                                </ul>
                                            </li>
                                        </ul>
                                    </li>
                                    <li data-mega-col="col-md-4" class="col-md-4">
                                        <h6 data-toggle="dropdown" class="dropdown-menu-header text-uppercase"><i class="la la-cog"></i>Column 4 title
                                  </h6>
                                        <ul class="drilldown-menu">
                                            <li class="menu-list">
                                                <ul class="mega-menu-sub">
                                                    <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>First Link col-4</a>
                                                    </li>
                                                    <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>Second Link col-4</a>
                                                        <ul class="mega-menu-sub">
                                                            <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>submenu level 2</a>
                                                            </li>
                                                            <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>submenu level 2</a>
                                                            </li>
                                                            <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>submenu level 2 link</a>
                                                                <ul class="mega-menu-sub">
                                                                    <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>submenu level 3</a>
                                                                    </li>
                                                                    <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>submenu level 3</a>
                                                                    </li>
                                                                    <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>submenu level 3</a>
                                                                    </li>
                                                                    <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>submenu level 3</a>
                                                                    </li>
                                                                </ul>
                                                            </li>
                                                            <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>submenu level 2</a>
                                                            </li>
                                                        </ul>
                                                    </li>
                                                    <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>Third Link col-4</a>
                                                    </li>
                                                    <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>Fourth Link col-4</a>
                                                    </li>
                                                </ul>
                                            </li>
                                        </ul>
                                    </li>
                                </ul>
                            </li>
                            <li data-menu="dropdown" class="dropdown nav-item"><a href="#" data-toggle="dropdown" class="dropdown-toggle nav-link"><i class="la la-circle"></i><span>Menu levels</span></a>
                                <ul class="dropdown-menu">
                                    <li data-menu=""><a href="#" data-toggle="dropdown" class="dropdown-item">Second level</a>
                                    </li>
                                    <li data-menu="dropdown-submenu" class="dropdown dropdown-submenu"><a href="#" data-toggle="dropdown" class="dropdown-item dropdown-toggle">Second level with child</a>
                                        <ul class="dropdown-menu">
                                            <li data-menu=""><a href="#" data-toggle="dropdown" class="dropdown-item">Third level</a>
                                            </li>
                                            <li data-menu="dropdown-submenu" class="dropdown dropdown-submenu"><a href="#" data-toggle="dropdown" class="dropdown-item dropdown-toggle">Third level with child</a>
                                                <ul class="dropdown-menu">
                                                    <li data-menu=""><a href="#" data-toggle="dropdown" class="dropdown-item">Fourth level</a>
                                                    </li>
                                                    <li data-menu=""><a href="#" data-toggle="dropdown" class="dropdown-item">Fourth level</a>
                                                    </li>
                                                </ul>
                                            </li>
                                        </ul>
                                    </li>
                                    <li data-menu=""><a href="#" data-toggle="dropdown" class="dropdown-item">Second level</a>
                                    </li>
                                </ul>
                            </li>
                            <li data-menu="dropdown" class="dropdown nav-item"><a href="#" data-toggle="dropdown" class="dropdown-toggle nav-link"><i class="la la-circle"></i><span>Menu levels</span></a>
                                <ul class="dropdown-menu">
                                    <li data-menu=""><a href="#" data-toggle="dropdown" class="dropdown-item">Second level</a>
                                    </li>
                                    <li data-menu="dropdown-submenu" class="dropdown dropdown-submenu"><a href="#" data-toggle="dropdown" class="dropdown-item dropdown-toggle">Second level with child</a>
                                        <ul class="dropdown-menu">
                                            <li data-menu=""><a href="#" data-toggle="dropdown" class="dropdown-item">Third level</a>
                                            </li>
                                            <li data-menu="dropdown-submenu" class="dropdown dropdown-submenu"><a href="#" data-toggle="dropdown" class="dropdown-item dropdown-toggle">Third level with child</a>
                                                <ul class="dropdown-menu">
                                                    <li data-menu=""><a href="#" data-toggle="dropdown" class="dropdown-item">Fourth level</a>
                                                    </li>
                                                    <li data-menu=""><a href="#" data-toggle="dropdown" class="dropdown-item">Fourth level</a>
                                                    </li>
                                                </ul>
                                            </li>
                                        </ul>
                                    </li>
                                    <li data-menu=""><a href="#" data-toggle="dropdown" class="dropdown-item">Second level</a>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </div>
                    <!-- /horizontal menu content-->
                </div>
                <h5 class="mt-3">Custom dark colors</h5>
                <p class="mt-2">Dark amber</p>
                <div class="header-navbar navbar-expand-sm menu-icon-right navbar navbar-horizontal navbar-dark navbar-shadow bg-amber bg-darken-5 border-amber border-darken-4">
                    <!-- Horizontal menu content-->
                    <div data-menu="menu-container" class="horizontal-menu navbar-container ml-0">
                        <ul data-menu="menu-navigation" class="nav navbar-nav">
                            <li class="nav-item"><a href="index.html" class="nav-link"><i class="la la-home font-medium-2"></i><span>Dashboard</span></a></li>
                            <li data-menu="megamenu" class="dropdown mega-dropdown nav-item"><a href="#" data-toggle="dropdown" class="dropdown-toggle nav-link"><i class="la la-tv"></i><span>Mega Menu</span></a>
                                <ul class="dropdown-menu row">
                                    <li data-mega-col="col-md-3" class="col-md-3">
                                        <ul class="drilldown-menu">
                                            <li class="menu-list">
                                                <ul class="mega-menu-sub">
                                                    <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>First Link col-1</a>
                                                    </li>
                                                    <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>Second Link col-1 link</a>
                                                        <ul class="mega-menu-sub">
                                                            <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>submenu level 2</a>
                                                            </li>
                                                            <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>submenu level 2</a>
                                                            </li>
                                                            <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>submenu level 2 link</a>
                                                                <ul class="mega-menu-sub">
                                                                    <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>submenu level 3</a>
                                                                    </li>
                                                                    <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>submenu level 3</a>
                                                                    </li>
                                                                    <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>submenu level 3</a>
                                                                    </li>
                                                                    <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>submenu level 3</a>
                                                                    </li>
                                                                </ul>
                                                            </li>
                                                            <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>submenu level 2</a>
                                                            </li>
                                                        </ul>
                                                    </li>
                                                    <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>Third Link col-1</a>
                                                    </li>
                                                    <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>Fourth Link col-1</a>
                                                    </li>
                                                </ul>
                                            </li>
                                        </ul>
                                    </li>
                                    <li data-mega-col="col-md-3" class="col-md-3">
                                        <h6 data-toggle="dropdown" class="dropdown-menu-header text-uppercase"><i class="la la-cog"></i>Column 2 title
                                  </h6>
                                        <ul class="drilldown-menu">
                                            <li class="menu-list">
                                                <ul class="mega-menu-sub">
                                                    <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>First Link col-2</a>
                                                    </li>
                                                    <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>Second Link col-2</a>
                                                        <ul class="mega-menu-sub">
                                                            <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>submenu level 2</a>
                                                            </li>
                                                            <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>submenu level 2</a>
                                                            </li>
                                                            <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>submenu level 2 link</a>
                                                                <ul class="mega-menu-sub">
                                                                    <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>submenu level 3</a>
                                                                        <ul class="mega-menu-sub">
                                                                            <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>submenu level 2</a>
                                                                            </li>
                                                                            <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>submenu level 2</a>
                                                                            </li>
                                                                        </ul>
                                                                    </li>
                                                                    <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>submenu level 3</a>
                                                                    </li>
                                                                    <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>submenu level 3</a>
                                                                    </li>
                                                                    <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>submenu level 3</a>
                                                                    </li>
                                                                </ul>
                                                            </li>
                                                            <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>submenu level 2</a>
                                                            </li>
                                                        </ul>
                                                    </li>
                                                    <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>Third Link col-2</a>
                                                    </li>
                                                    <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>Fourth Link col-2</a>
                                                    </li>
                                                </ul>
                                            </li>
                                        </ul>
                                    </li>
                                    <li data-mega-col="col-md-3" class="col-md-3">
                                        <h6 data-toggle="dropdown" class="dropdown-menu-header text-uppercase"><i class="la la-cog"></i>Column 3 title
                                  </h6>
                                        <ul class="drilldown-menu">
                                            <li class="menu-list">
                                                <ul class="mega-menu-sub">
                                                    <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>First Link col-3</a>
                                                    </li>
                                                    <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>Second Link col-3</a>
                                                        <ul class="mega-menu-sub">
                                                            <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>submenu level 2</a>
                                                            </li>
                                                            <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>submenu level 2</a>
                                                            </li>
                                                            <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>submenu level 2 link</a>
                                                                <ul class="mega-menu-sub">
                                                                    <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>submenu level 3</a>
                                                                    </li>
                                                                    <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>submenu level 3</a>
                                                                    </li>
                                                                    <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>submenu level 3</a>
                                                                    </li>
                                                                    <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>submenu level 3</a>
                                                                    </li>
                                                                </ul>
                                                            </li>
                                                            <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>submenu level 2</a>
                                                            </li>
                                                        </ul>
                                                    </li>
                                                    <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>Third Link col-3</a>
                                                    </li>
                                                    <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>Fourth Link col-3</a>
                                                    </li>
                                                </ul>
                                            </li>
                                        </ul>
                                    </li>
                                    <li data-mega-col="col-md-3" class="col-md-3">
                                        <h6 data-toggle="dropdown" class="dropdown-menu-header text-uppercase"><i class="la la-cog"></i>Column 4 title
                                  </h6>
                                        <ul class="drilldown-menu">
                                            <li class="menu-list">
                                                <ul class="mega-menu-sub">
                                                    <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>First Link col-4</a>
                                                    </li>
                                                    <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>Second Link col-4</a>
                                                        <ul class="mega-menu-sub">
                                                            <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>submenu level 2</a>
                                                            </li>
                                                            <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>submenu level 2</a>
                                                            </li>
                                                            <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>submenu level 2 link</a>
                                                                <ul class="mega-menu-sub">
                                                                    <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>submenu level 3</a>
                                                                    </li>
                                                                    <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>submenu level 3</a>
                                                                    </li>
                                                                    <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>submenu level 3</a>
                                                                    </li>
                                                                    <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>submenu level 3</a>
                                                                    </li>
                                                                </ul>
                                                            </li>
                                                            <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>submenu level 2</a>
                                                            </li>
                                                        </ul>
                                                    </li>
                                                    <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>Third Link col-4</a>
                                                    </li>
                                                    <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>Fourth Link col-4</a>
                                                    </li>
                                                </ul>
                                            </li>
                                        </ul>
                                    </li>
                                </ul>
                            </li>
                            <li data-menu="dropdown" class="dropdown nav-item"><a href="#" data-toggle="dropdown" class="dropdown-toggle nav-link"><i class="la la-bookmark"></i><span>My Menu</span></a>
                                <ul class="dropdown-menu">
                                    <li class=" navigation-header"><span>Main</span></li>
                                    <li data-menu=""><a href="#" data-toggle="dropdown" class="dropdown-item">Second level</a>
                                    </li>
                                    <li data-menu=""><a href="#" data-toggle="dropdown" class="dropdown-item">Second level</a>
                                    </li>
                                    <li data-menu=""><a href="#" data-toggle="dropdown" class="dropdown-item">Second level</a>
                                    </li>
                                    <li data-menu=""><a href="#" data-toggle="dropdown" class="dropdown-item">Second level</a>
                                    </li>
                                    <li data-menu=""><a href="#" data-toggle="dropdown" class="dropdown-item">Second level</a>
                                    </li>
                                    <li data-menu=""><a href="#" data-toggle="dropdown" class="dropdown-item">Second level</a>
                                    </li>
                                    <li data-menu=""><a href="#" data-toggle="dropdown" class="dropdown-item">Second level</a>
                                    </li>
                                    <li data-menu=""><a href="#" data-toggle="dropdown" class="dropdown-item">Second level</a>
                                    </li>
                                    <li data-menu=""><a href="#" data-toggle="dropdown" class="dropdown-item">Second level</a>
                                    </li>
                                    <li data-menu=""><a href="#" data-toggle="dropdown" class="dropdown-item">Second level</a>
                                    </li>
                                    <li data-menu=""><a href="#" data-toggle="dropdown" class="dropdown-item">Second level</a>
                                    </li>
                                    <li data-menu=""><a href="#" data-toggle="dropdown" class="dropdown-item">Second level</a>
                                    </li>
                                    <li data-menu=""><a href="#" data-toggle="dropdown" class="dropdown-item">Second level</a>
                                    </li>
                                    <li data-menu=""><a href="#" data-toggle="dropdown" class="dropdown-item">Second level</a>
                                    </li>
                                    <li data-menu="dropdown-submenu" class="dropdown dropdown-submenu"><a href="#" data-toggle="dropdown" class="dropdown-item dropdown-toggle">Second level with child</a>
                                        <ul class="dropdown-menu">
                                            <li data-menu=""><a href="#" data-toggle="dropdown" class="dropdown-item">Third level</a>
                                            </li>
                                            <li data-menu="dropdown-submenu" class="dropdown dropdown-submenu"><a href="#" data-toggle="dropdown" class="dropdown-item dropdown-toggle">Third level with child</a>
                                                <ul class="dropdown-menu">
                                                    <li data-menu=""><a href="#" data-toggle="dropdown" class="dropdown-item">Fourth level</a>
                                                    </li>
                                                    <li data-menu=""><a href="#" data-toggle="dropdown" class="dropdown-item">Fourth level</a>
                                                    </li>
                                                </ul>
                                            </li>
                                        </ul>
                                    </li>
                                    <li data-menu=""><a href="#" data-toggle="dropdown" class="dropdown-item">Second level</a>
                                    </li>
                                </ul>
                            </li>
                            <li data-menu="dropdown" class="dropdown nav-item"><a href="#" data-toggle="dropdown" class="dropdown-toggle nav-link"><i class="la la-circle"></i><span>Menu levels</span></a>
                                <ul class="dropdown-menu">
                                    <li data-menu=""><a href="#" data-toggle="dropdown" class="dropdown-item">Second level</a>
                                    </li>
                                    <li data-menu="dropdown-submenu" class="dropdown dropdown-submenu"><a href="#" data-toggle="dropdown" class="dropdown-item dropdown-toggle">Second level with child</a>
                                        <ul class="dropdown-menu">
                                            <li data-menu=""><a href="#" data-toggle="dropdown" class="dropdown-item">Third level</a>
                                            </li>
                                            <li data-menu="dropdown-submenu" class="dropdown dropdown-submenu"><a href="#" data-toggle="dropdown" class="dropdown-item dropdown-toggle">Third level with child</a>
                                                <ul class="dropdown-menu">
                                                    <li data-menu=""><a href="#" data-toggle="dropdown" class="dropdown-item">Fourth level</a>
                                                    </li>
                                                    <li data-menu=""><a href="#" data-toggle="dropdown" class="dropdown-item">Fourth level</a>
                                                    </li>
                                                </ul>
                                            </li>
                                        </ul>
                                    </li>
                                    <li data-menu=""><a href="#" data-toggle="dropdown" class="dropdown-item">Second level</a>
                                    </li>
                                </ul>
                            </li>
                            <li data-menu="megamenu" class="dropdown mega-dropdown nav-item"><a href="#" data-toggle="dropdown" class="dropdown-toggle nav-link"><i class="la la-tv"></i><span>Mega Menu</span></a>
                                <ul class="dropdown-menu row">
                                    <li data-mega-col="col-md-4" class="col-md-4">
                                        <h6 data-toggle="dropdown" class="dropdown-menu-header text-uppercase"><i class="la la-cog"></i>Column 2 title
                                  </h6>
                                        <ul class="drilldown-menu">
                                            <li class="menu-list">
                                                <ul class="mega-menu-sub">
                                                    <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>First Link col-2</a>
                                                    </li>
                                                    <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>Second Link col-2</a>
                                                        <ul class="mega-menu-sub">
                                                            <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>submenu level 2</a>
                                                            </li>
                                                            <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>submenu level 2</a>
                                                            </li>
                                                            <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>submenu level 2 link</a>
                                                                <ul class="mega-menu-sub">
                                                                    <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>submenu level 3</a>
                                                                    </li>
                                                                    <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>submenu level 3</a>
                                                                    </li>
                                                                    <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>submenu level 3</a>
                                                                    </li>
                                                                    <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>submenu level 3</a>
                                                                    </li>
                                                                </ul>
                                                            </li>
                                                            <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>submenu level 2</a>
                                                            </li>
                                                        </ul>
                                                    </li>
                                                    <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>Third Link col-2</a>
                                                    </li>
                                                    <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>Fourth Link col-2</a>
                                                    </li>
                                                </ul>
                                            </li>
                                        </ul>
                                    </li>
                                    <li data-mega-col="col-md-4" class="col-md-4">
                                        <h6 data-toggle="dropdown" class="dropdown-menu-header text-uppercase"><i class="la la-cog"></i>Column 3 title
                                  </h6>
                                        <ul class="drilldown-menu">
                                            <li class="menu-list">
                                                <ul class="mega-menu-sub">
                                                    <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>First Link col-3</a>
                                                    </li>
                                                    <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>Second Link col-3</a>
                                                        <ul class="mega-menu-sub">
                                                            <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>submenu level 2</a>
                                                            </li>
                                                            <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>submenu level 2</a>
                                                            </li>
                                                            <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>submenu level 2 link</a>
                                                                <ul class="mega-menu-sub">
                                                                    <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>submenu level 3</a>
                                                                    </li>
                                                                    <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>submenu level 3</a>
                                                                    </li>
                                                                    <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>submenu level 3</a>
                                                                    </li>
                                                                    <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>submenu level 3</a>
                                                                    </li>
                                                                </ul>
                                                            </li>
                                                            <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>submenu level 2</a>
                                                            </li>
                                                        </ul>
                                                    </li>
                                                    <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>Third Link col-3</a>
                                                    </li>
                                                    <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>Fourth Link col-3</a>
                                                    </li>
                                                </ul>
                                            </li>
                                        </ul>
                                    </li>
                                    <li data-mega-col="col-md-4" class="col-md-4">
                                        <h6 data-toggle="dropdown" class="dropdown-menu-header text-uppercase"><i class="la la-cog"></i>Column 4 title
                                  </h6>
                                        <ul class="drilldown-menu">
                                            <li class="menu-list">
                                                <ul class="mega-menu-sub">
                                                    <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>First Link col-4</a>
                                                    </li>
                                                    <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>Second Link col-4</a>
                                                        <ul class="mega-menu-sub">
                                                            <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>submenu level 2</a>
                                                            </li>
                                                            <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>submenu level 2</a>
                                                            </li>
                                                            <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>submenu level 2 link</a>
                                                                <ul class="mega-menu-sub">
                                                                    <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>submenu level 3</a>
                                                                    </li>
                                                                    <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>submenu level 3</a>
                                                                    </li>
                                                                    <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>submenu level 3</a>
                                                                    </li>
                                                                    <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>submenu level 3</a>
                                                                    </li>
                                                                </ul>
                                                            </li>
                                                            <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>submenu level 2</a>
                                                            </li>
                                                        </ul>
                                                    </li>
                                                    <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>Third Link col-4</a>
                                                    </li>
                                                    <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>Fourth Link col-4</a>
                                                    </li>
                                                </ul>
                                            </li>
                                        </ul>
                                    </li>
                                </ul>
                            </li>
                            <li data-menu="dropdown" class="dropdown nav-item"><a href="#" data-toggle="dropdown" class="dropdown-toggle nav-link"><i class="la la-circle"></i><span>Menu levels</span></a>
                                <ul class="dropdown-menu">
                                    <li data-menu=""><a href="#" data-toggle="dropdown" class="dropdown-item">Second level</a>
                                    </li>
                                    <li data-menu="dropdown-submenu" class="dropdown dropdown-submenu"><a href="#" data-toggle="dropdown" class="dropdown-item dropdown-toggle">Second level with child</a>
                                        <ul class="dropdown-menu">
                                            <li data-menu=""><a href="#" data-toggle="dropdown" class="dropdown-item">Third level</a>
                                            </li>
                                            <li data-menu="dropdown-submenu" class="dropdown dropdown-submenu"><a href="#" data-toggle="dropdown" class="dropdown-item dropdown-toggle">Third level with child</a>
                                                <ul class="dropdown-menu">
                                                    <li data-menu=""><a href="#" data-toggle="dropdown" class="dropdown-item">Fourth level</a>
                                                    </li>
                                                    <li data-menu=""><a href="#" data-toggle="dropdown" class="dropdown-item">Fourth level</a>
                                                    </li>
                                                </ul>
                                            </li>
                                        </ul>
                                    </li>
                                    <li data-menu=""><a href="#" data-toggle="dropdown" class="dropdown-item">Second level</a>
                                    </li>
                                </ul>
                            </li>
                            <li data-menu="dropdown" class="dropdown nav-item"><a href="#" data-toggle="dropdown" class="dropdown-toggle nav-link"><i class="la la-circle"></i><span>Menu levels</span></a>
                                <ul class="dropdown-menu">
                                    <li data-menu=""><a href="#" data-toggle="dropdown" class="dropdown-item">Second level</a>
                                    </li>
                                    <li data-menu="dropdown-submenu" class="dropdown dropdown-submenu"><a href="#" data-toggle="dropdown" class="dropdown-item dropdown-toggle">Second level with child</a>
                                        <ul class="dropdown-menu">
                                            <li data-menu=""><a href="#" data-toggle="dropdown" class="dropdown-item">Third level</a>
                                            </li>
                                            <li data-menu="dropdown-submenu" class="dropdown dropdown-submenu"><a href="#" data-toggle="dropdown" class="dropdown-item dropdown-toggle">Third level with child</a>
                                                <ul class="dropdown-menu">
                                                    <li data-menu=""><a href="#" data-toggle="dropdown" class="dropdown-item">Fourth level</a>
                                                    </li>
                                                    <li data-menu=""><a href="#" data-toggle="dropdown" class="dropdown-item">Fourth level</a>
                                                    </li>
                                                </ul>
                                            </li>
                                        </ul>
                                    </li>
                                    <li data-menu=""><a href="#" data-toggle="dropdown" class="dropdown-item">Second level</a>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </div>
                    <!-- /horizontal menu content-->
                </div>
                <p class="mt-2">Teal without shadow</p>
                <div class="header-navbar navbar-expand-sm navbar navbar-horizontal navbar-dark bg-teal bg-darken-5 border-teal border-darken-4">
                    <!-- Horizontal menu content-->
                    <div data-menu="menu-container" class="horizontal-menu navbar-container ml-0">
                        <ul data-menu="menu-navigation" class="nav navbar-nav">
                            <li class="nav-item"><a href="index.html" class="nav-link"><i class="la la-home font-medium-2"></i><span>Dashboard</span></a></li>
                            <li data-menu="megamenu" class="dropdown mega-dropdown nav-item"><a href="#" data-toggle="dropdown" class="dropdown-toggle nav-link"><i class="la la-tv"></i><span>Mega Menu</span></a>
                                <ul class="dropdown-menu row">
                                    <li data-mega-col="col-md-3" class="col-md-3">
                                        <ul class="drilldown-menu">
                                            <li class="menu-list">
                                                <ul class="mega-menu-sub">
                                                    <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>First Link col-1</a>
                                                    </li>
                                                    <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>Second Link col-1 link</a>
                                                        <ul class="mega-menu-sub">
                                                            <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>submenu level 2</a>
                                                            </li>
                                                            <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>submenu level 2</a>
                                                            </li>
                                                            <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>submenu level 2 link</a>
                                                                <ul class="mega-menu-sub">
                                                                    <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>submenu level 3</a>
                                                                    </li>
                                                                    <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>submenu level 3</a>
                                                                    </li>
                                                                    <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>submenu level 3</a>
                                                                    </li>
                                                                    <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>submenu level 3</a>
                                                                    </li>
                                                                </ul>
                                                            </li>
                                                            <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>submenu level 2</a>
                                                            </li>
                                                        </ul>
                                                    </li>
                                                    <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>Third Link col-1</a>
                                                    </li>
                                                    <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>Fourth Link col-1</a>
                                                    </li>
                                                </ul>
                                            </li>
                                        </ul>
                                    </li>
                                    <li data-mega-col="col-md-3" class="col-md-3">
                                        <h6 data-toggle="dropdown" class="dropdown-menu-header text-uppercase"><i class="la la-cog"></i>Column 2 title
                                  </h6>
                                        <ul class="drilldown-menu">
                                            <li class="menu-list">
                                                <ul class="mega-menu-sub">
                                                    <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>First Link col-2</a>
                                                    </li>
                                                    <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>Second Link col-2</a>
                                                        <ul class="mega-menu-sub">
                                                            <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>submenu level 2</a>
                                                            </li>
                                                            <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>submenu level 2</a>
                                                            </li>
                                                            <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>submenu level 2 link</a>
                                                                <ul class="mega-menu-sub">
                                                                    <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>submenu level 3</a>
                                                                        <ul class="mega-menu-sub">
                                                                            <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>submenu level 2</a>
                                                                            </li>
                                                                            <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>submenu level 2</a>
                                                                            </li>
                                                                        </ul>
                                                                    </li>
                                                                    <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>submenu level 3</a>
                                                                    </li>
                                                                    <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>submenu level 3</a>
                                                                    </li>
                                                                    <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>submenu level 3</a>
                                                                    </li>
                                                                </ul>
                                                            </li>
                                                            <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>submenu level 2</a>
                                                            </li>
                                                        </ul>
                                                    </li>
                                                    <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>Third Link col-2</a>
                                                    </li>
                                                    <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>Fourth Link col-2</a>
                                                    </li>
                                                </ul>
                                            </li>
                                        </ul>
                                    </li>
                                    <li data-mega-col="col-md-3" class="col-md-3">
                                        <h6 data-toggle="dropdown" class="dropdown-menu-header text-uppercase"><i class="la la-cog"></i>Column 3 title
                                  </h6>
                                        <ul class="drilldown-menu">
                                            <li class="menu-list">
                                                <ul class="mega-menu-sub">
                                                    <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>First Link col-3</a>
                                                    </li>
                                                    <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>Second Link col-3</a>
                                                        <ul class="mega-menu-sub">
                                                            <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>submenu level 2</a>
                                                            </li>
                                                            <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>submenu level 2</a>
                                                            </li>
                                                            <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>submenu level 2 link</a>
                                                                <ul class="mega-menu-sub">
                                                                    <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>submenu level 3</a>
                                                                    </li>
                                                                    <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>submenu level 3</a>
                                                                    </li>
                                                                    <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>submenu level 3</a>
                                                                    </li>
                                                                    <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>submenu level 3</a>
                                                                    </li>
                                                                </ul>
                                                            </li>
                                                            <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>submenu level 2</a>
                                                            </li>
                                                        </ul>
                                                    </li>
                                                    <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>Third Link col-3</a>
                                                    </li>
                                                    <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>Fourth Link col-3</a>
                                                    </li>
                                                </ul>
                                            </li>
                                        </ul>
                                    </li>
                                    <li data-mega-col="col-md-3" class="col-md-3">
                                        <h6 data-toggle="dropdown" class="dropdown-menu-header text-uppercase"><i class="la la-cog"></i>Column 4 title
                                  </h6>
                                        <ul class="drilldown-menu">
                                            <li class="menu-list">
                                                <ul class="mega-menu-sub">
                                                    <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>First Link col-4</a>
                                                    </li>
                                                    <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>Second Link col-4</a>
                                                        <ul class="mega-menu-sub">
                                                            <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>submenu level 2</a>
                                                            </li>
                                                            <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>submenu level 2</a>
                                                            </li>
                                                            <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>submenu level 2 link</a>
                                                                <ul class="mega-menu-sub">
                                                                    <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>submenu level 3</a>
                                                                    </li>
                                                                    <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>submenu level 3</a>
                                                                    </li>
                                                                    <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>submenu level 3</a>
                                                                    </li>
                                                                    <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>submenu level 3</a>
                                                                    </li>
                                                                </ul>
                                                            </li>
                                                            <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>submenu level 2</a>
                                                            </li>
                                                        </ul>
                                                    </li>
                                                    <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>Third Link col-4</a>
                                                    </li>
                                                    <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>Fourth Link col-4</a>
                                                    </li>
                                                </ul>
                                            </li>
                                        </ul>
                                    </li>
                                </ul>
                            </li>
                            <li data-menu="dropdown" class="dropdown nav-item"><a href="#" data-toggle="dropdown" class="dropdown-toggle nav-link"><i class="la la-bookmark"></i><span>My Menu</span></a>
                                <ul class="dropdown-menu">
                                    <li class=" navigation-header"><span>Main</span></li>
                                    <li data-menu=""><a href="#" data-toggle="dropdown" class="dropdown-item">Second level</a>
                                    </li>
                                    <li data-menu=""><a href="#" data-toggle="dropdown" class="dropdown-item">Second level</a>
                                    </li>
                                    <li data-menu=""><a href="#" data-toggle="dropdown" class="dropdown-item">Second level</a>
                                    </li>
                                    <li data-menu=""><a href="#" data-toggle="dropdown" class="dropdown-item">Second level</a>
                                    </li>
                                    <li data-menu=""><a href="#" data-toggle="dropdown" class="dropdown-item">Second level</a>
                                    </li>
                                    <li data-menu=""><a href="#" data-toggle="dropdown" class="dropdown-item">Second level</a>
                                    </li>
                                    <li data-menu=""><a href="#" data-toggle="dropdown" class="dropdown-item">Second level</a>
                                    </li>
                                    <li data-menu=""><a href="#" data-toggle="dropdown" class="dropdown-item">Second level</a>
                                    </li>
                                    <li data-menu=""><a href="#" data-toggle="dropdown" class="dropdown-item">Second level</a>
                                    </li>
                                    <li data-menu=""><a href="#" data-toggle="dropdown" class="dropdown-item">Second level</a>
                                    </li>
                                    <li data-menu=""><a href="#" data-toggle="dropdown" class="dropdown-item">Second level</a>
                                    </li>
                                    <li data-menu=""><a href="#" data-toggle="dropdown" class="dropdown-item">Second level</a>
                                    </li>
                                    <li data-menu=""><a href="#" data-toggle="dropdown" class="dropdown-item">Second level</a>
                                    </li>
                                    <li data-menu=""><a href="#" data-toggle="dropdown" class="dropdown-item">Second level</a>
                                    </li>
                                    <li data-menu="dropdown-submenu" class="dropdown dropdown-submenu"><a href="#" data-toggle="dropdown" class="dropdown-item dropdown-toggle">Second level with child</a>
                                        <ul class="dropdown-menu">
                                            <li data-menu=""><a href="#" data-toggle="dropdown" class="dropdown-item">Third level</a>
                                            </li>
                                            <li data-menu="dropdown-submenu" class="dropdown dropdown-submenu"><a href="#" data-toggle="dropdown" class="dropdown-item dropdown-toggle">Third level with child</a>
                                                <ul class="dropdown-menu">
                                                    <li data-menu=""><a href="#" data-toggle="dropdown" class="dropdown-item">Fourth level</a>
                                                    </li>
                                                    <li data-menu=""><a href="#" data-toggle="dropdown" class="dropdown-item">Fourth level</a>
                                                    </li>
                                                </ul>
                                            </li>
                                        </ul>
                                    </li>
                                    <li data-menu=""><a href="#" data-toggle="dropdown" class="dropdown-item">Second level</a>
                                    </li>
                                </ul>
                            </li>
                            <li data-menu="dropdown" class="dropdown nav-item"><a href="#" data-toggle="dropdown" class="dropdown-toggle nav-link"><i class="la la-circle"></i><span>Menu levels</span></a>
                                <ul class="dropdown-menu">
                                    <li data-menu=""><a href="#" data-toggle="dropdown" class="dropdown-item">Second level</a>
                                    </li>
                                    <li data-menu="dropdown-submenu" class="dropdown dropdown-submenu"><a href="#" data-toggle="dropdown" class="dropdown-item dropdown-toggle">Second level with child</a>
                                        <ul class="dropdown-menu">
                                            <li data-menu=""><a href="#" data-toggle="dropdown" class="dropdown-item">Third level</a>
                                            </li>
                                            <li data-menu="dropdown-submenu" class="dropdown dropdown-submenu"><a href="#" data-toggle="dropdown" class="dropdown-item dropdown-toggle">Third level with child</a>
                                                <ul class="dropdown-menu">
                                                    <li data-menu=""><a href="#" data-toggle="dropdown" class="dropdown-item">Fourth level</a>
                                                    </li>
                                                    <li data-menu=""><a href="#" data-toggle="dropdown" class="dropdown-item">Fourth level</a>
                                                    </li>
                                                </ul>
                                            </li>
                                        </ul>
                                    </li>
                                    <li data-menu=""><a href="#" data-toggle="dropdown" class="dropdown-item">Second level</a>
                                    </li>
                                </ul>
                            </li>
                            <li data-menu="megamenu" class="dropdown mega-dropdown nav-item"><a href="#" data-toggle="dropdown" class="dropdown-toggle nav-link"><i class="la la-tv"></i><span>Mega Menu</span></a>
                                <ul class="dropdown-menu row">
                                    <li data-mega-col="col-md-4" class="col-md-4">
                                        <h6 data-toggle="dropdown" class="dropdown-menu-header text-uppercase"><i class="la la-cog"></i>Column 2 title
                                  </h6>
                                        <ul class="drilldown-menu">
                                            <li class="menu-list">
                                                <ul class="mega-menu-sub">
                                                    <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>First Link col-2</a>
                                                    </li>
                                                    <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>Second Link col-2</a>
                                                        <ul class="mega-menu-sub">
                                                            <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>submenu level 2</a>
                                                            </li>
                                                            <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>submenu level 2</a>
                                                            </li>
                                                            <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>submenu level 2 link</a>
                                                                <ul class="mega-menu-sub">
                                                                    <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>submenu level 3</a>
                                                                    </li>
                                                                    <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>submenu level 3</a>
                                                                    </li>
                                                                    <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>submenu level 3</a>
                                                                    </li>
                                                                    <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>submenu level 3</a>
                                                                    </li>
                                                                </ul>
                                                            </li>
                                                            <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>submenu level 2</a>
                                                            </li>
                                                        </ul>
                                                    </li>
                                                    <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>Third Link col-2</a>
                                                    </li>
                                                    <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>Fourth Link col-2</a>
                                                    </li>
                                                </ul>
                                            </li>
                                        </ul>
                                    </li>
                                    <li data-mega-col="col-md-4" class="col-md-4">
                                        <h6 data-toggle="dropdown" class="dropdown-menu-header text-uppercase"><i class="la la-cog"></i>Column 3 title
                                  </h6>
                                        <ul class="drilldown-menu">
                                            <li class="menu-list">
                                                <ul class="mega-menu-sub">
                                                    <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>First Link col-3</a>
                                                    </li>
                                                    <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>Second Link col-3</a>
                                                        <ul class="mega-menu-sub">
                                                            <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>submenu level 2</a>
                                                            </li>
                                                            <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>submenu level 2</a>
                                                            </li>
                                                            <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>submenu level 2 link</a>
                                                                <ul class="mega-menu-sub">
                                                                    <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>submenu level 3</a>
                                                                    </li>
                                                                    <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>submenu level 3</a>
                                                                    </li>
                                                                    <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>submenu level 3</a>
                                                                    </li>
                                                                    <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>submenu level 3</a>
                                                                    </li>
                                                                </ul>
                                                            </li>
                                                            <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>submenu level 2</a>
                                                            </li>
                                                        </ul>
                                                    </li>
                                                    <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>Third Link col-3</a>
                                                    </li>
                                                    <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>Fourth Link col-3</a>
                                                    </li>
                                                </ul>
                                            </li>
                                        </ul>
                                    </li>
                                    <li data-mega-col="col-md-4" class="col-md-4">
                                        <h6 data-toggle="dropdown" class="dropdown-menu-header text-uppercase"><i class="la la-cog"></i>Column 4 title
                                  </h6>
                                        <ul class="drilldown-menu">
                                            <li class="menu-list">
                                                <ul class="mega-menu-sub">
                                                    <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>First Link col-4</a>
                                                    </li>
                                                    <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>Second Link col-4</a>
                                                        <ul class="mega-menu-sub">
                                                            <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>submenu level 2</a>
                                                            </li>
                                                            <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>submenu level 2</a>
                                                            </li>
                                                            <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>submenu level 2 link</a>
                                                                <ul class="mega-menu-sub">
                                                                    <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>submenu level 3</a>
                                                                    </li>
                                                                    <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>submenu level 3</a>
                                                                    </li>
                                                                    <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>submenu level 3</a>
                                                                    </li>
                                                                    <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>submenu level 3</a>
                                                                    </li>
                                                                </ul>
                                                            </li>
                                                            <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>submenu level 2</a>
                                                            </li>
                                                        </ul>
                                                    </li>
                                                    <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>Third Link col-4</a>
                                                    </li>
                                                    <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>Fourth Link col-4</a>
                                                    </li>
                                                </ul>
                                            </li>
                                        </ul>
                                    </li>
                                </ul>
                            </li>
                            <li data-menu="dropdown" class="dropdown nav-item"><a href="#" data-toggle="dropdown" class="dropdown-toggle nav-link"><i class="la la-circle"></i><span>Menu levels</span></a>
                                <ul class="dropdown-menu">
                                    <li data-menu=""><a href="#" data-toggle="dropdown" class="dropdown-item">Second level</a>
                                    </li>
                                    <li data-menu="dropdown-submenu" class="dropdown dropdown-submenu"><a href="#" data-toggle="dropdown" class="dropdown-item dropdown-toggle">Second level with child</a>
                                        <ul class="dropdown-menu">
                                            <li data-menu=""><a href="#" data-toggle="dropdown" class="dropdown-item">Third level</a>
                                            </li>
                                            <li data-menu="dropdown-submenu" class="dropdown dropdown-submenu"><a href="#" data-toggle="dropdown" class="dropdown-item dropdown-toggle">Third level with child</a>
                                                <ul class="dropdown-menu">
                                                    <li data-menu=""><a href="#" data-toggle="dropdown" class="dropdown-item">Fourth level</a>
                                                    </li>
                                                    <li data-menu=""><a href="#" data-toggle="dropdown" class="dropdown-item">Fourth level</a>
                                                    </li>
                                                </ul>
                                            </li>
                                        </ul>
                                    </li>
                                    <li data-menu=""><a href="#" data-toggle="dropdown" class="dropdown-item">Second level</a>
                                    </li>
                                </ul>
                            </li>
                            <li data-menu="dropdown" class="dropdown nav-item"><a href="#" data-toggle="dropdown" class="dropdown-toggle nav-link"><i class="la la-circle"></i><span>Menu levels</span></a>
                                <ul class="dropdown-menu">
                                    <li data-menu=""><a href="#" data-toggle="dropdown" class="dropdown-item">Second level</a>
                                    </li>
                                    <li data-menu="dropdown-submenu" class="dropdown dropdown-submenu"><a href="#" data-toggle="dropdown" class="dropdown-item dropdown-toggle">Second level with child</a>
                                        <ul class="dropdown-menu">
                                            <li data-menu=""><a href="#" data-toggle="dropdown" class="dropdown-item">Third level</a>
                                            </li>
                                            <li data-menu="dropdown-submenu" class="dropdown dropdown-submenu"><a href="#" data-toggle="dropdown" class="dropdown-item dropdown-toggle">Third level with child</a>
                                                <ul class="dropdown-menu">
                                                    <li data-menu=""><a href="#" data-toggle="dropdown" class="dropdown-item">Fourth level</a>
                                                    </li>
                                                    <li data-menu=""><a href="#" data-toggle="dropdown" class="dropdown-item">Fourth level</a>
                                                    </li>
                                                </ul>
                                            </li>
                                        </ul>
                                    </li>
                                    <li data-menu=""><a href="#" data-toggle="dropdown" class="dropdown-item">Second level</a>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </div>
                    <!-- /horizontal menu content-->
                </div>
                <p class="mt-2">Dark red</p>
                <div class="header-navbar navbar-expand-sm navbar navbar-horizontal navbar-dark navbar-shadow bg-red bg-darken-5 border-red border-darken-4">
                    <!-- Horizontal menu content-->
                    <div data-menu="menu-container" class="horizontal-menu navbar-container ml-0">
                        <ul data-menu="menu-navigation" class="nav navbar-nav">
                            <li class="nav-item"><a href="index.html" class="nav-link"><i class="la la-home font-medium-2"></i><span>Dashboard</span></a></li>
                            <li data-menu="megamenu" class="dropdown mega-dropdown nav-item"><a href="#" data-toggle="dropdown" class="dropdown-toggle nav-link"><i class="la la-tv"></i><span>Mega Menu</span></a>
                                <ul class="dropdown-menu row">
                                    <li data-mega-col="col-md-3" class="col-md-3">
                                        <ul class="drilldown-menu">
                                            <li class="menu-list">
                                                <ul class="mega-menu-sub">
                                                    <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>First Link col-1</a>
                                                    </li>
                                                    <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>Second Link col-1 link</a>
                                                        <ul class="mega-menu-sub">
                                                            <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>submenu level 2</a>
                                                            </li>
                                                            <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>submenu level 2</a>
                                                            </li>
                                                            <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>submenu level 2 link</a>
                                                                <ul class="mega-menu-sub">
                                                                    <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>submenu level 3</a>
                                                                    </li>
                                                                    <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>submenu level 3</a>
                                                                    </li>
                                                                    <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>submenu level 3</a>
                                                                    </li>
                                                                    <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>submenu level 3</a>
                                                                    </li>
                                                                </ul>
                                                            </li>
                                                            <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>submenu level 2</a>
                                                            </li>
                                                        </ul>
                                                    </li>
                                                    <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>Third Link col-1</a>
                                                    </li>
                                                    <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>Fourth Link col-1</a>
                                                    </li>
                                                </ul>
                                            </li>
                                        </ul>
                                    </li>
                                    <li data-mega-col="col-md-3" class="col-md-3">
                                        <h6 data-toggle="dropdown" class="dropdown-menu-header text-uppercase"><i class="la la-cog"></i>Column 2 title
                                  </h6>
                                        <ul class="drilldown-menu">
                                            <li class="menu-list">
                                                <ul class="mega-menu-sub">
                                                    <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>First Link col-2</a>
                                                    </li>
                                                    <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>Second Link col-2</a>
                                                        <ul class="mega-menu-sub">
                                                            <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>submenu level 2</a>
                                                            </li>
                                                            <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>submenu level 2</a>
                                                            </li>
                                                            <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>submenu level 2 link</a>
                                                                <ul class="mega-menu-sub">
                                                                    <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>submenu level 3</a>
                                                                        <ul class="mega-menu-sub">
                                                                            <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>submenu level 2</a>
                                                                            </li>
                                                                            <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>submenu level 2</a>
                                                                            </li>
                                                                        </ul>
                                                                    </li>
                                                                    <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>submenu level 3</a>
                                                                    </li>
                                                                    <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>submenu level 3</a>
                                                                    </li>
                                                                    <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>submenu level 3</a>
                                                                    </li>
                                                                </ul>
                                                            </li>
                                                            <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>submenu level 2</a>
                                                            </li>
                                                        </ul>
                                                    </li>
                                                    <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>Third Link col-2</a>
                                                    </li>
                                                    <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>Fourth Link col-2</a>
                                                    </li>
                                                </ul>
                                            </li>
                                        </ul>
                                    </li>
                                    <li data-mega-col="col-md-3" class="col-md-3">
                                        <h6 data-toggle="dropdown" class="dropdown-menu-header text-uppercase"><i class="la la-cog"></i>Column 3 title
                                  </h6>
                                        <ul class="drilldown-menu">
                                            <li class="menu-list">
                                                <ul class="mega-menu-sub">
                                                    <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>First Link col-3</a>
                                                    </li>
                                                    <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>Second Link col-3</a>
                                                        <ul class="mega-menu-sub">
                                                            <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>submenu level 2</a>
                                                            </li>
                                                            <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>submenu level 2</a>
                                                            </li>
                                                            <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>submenu level 2 link</a>
                                                                <ul class="mega-menu-sub">
                                                                    <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>submenu level 3</a>
                                                                    </li>
                                                                    <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>submenu level 3</a>
                                                                    </li>
                                                                    <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>submenu level 3</a>
                                                                    </li>
                                                                    <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>submenu level 3</a>
                                                                    </li>
                                                                </ul>
                                                            </li>
                                                            <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>submenu level 2</a>
                                                            </li>
                                                        </ul>
                                                    </li>
                                                    <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>Third Link col-3</a>
                                                    </li>
                                                    <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>Fourth Link col-3</a>
                                                    </li>
                                                </ul>
                                            </li>
                                        </ul>
                                    </li>
                                    <li data-mega-col="col-md-3" class="col-md-3">
                                        <h6 data-toggle="dropdown" class="dropdown-menu-header text-uppercase"><i class="la la-cog"></i>Column 4 title
                                  </h6>
                                        <ul class="drilldown-menu">
                                            <li class="menu-list">
                                                <ul class="mega-menu-sub">
                                                    <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>First Link col-4</a>
                                                    </li>
                                                    <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>Second Link col-4</a>
                                                        <ul class="mega-menu-sub">
                                                            <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>submenu level 2</a>
                                                            </li>
                                                            <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>submenu level 2</a>
                                                            </li>
                                                            <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>submenu level 2 link</a>
                                                                <ul class="mega-menu-sub">
                                                                    <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>submenu level 3</a>
                                                                    </li>
                                                                    <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>submenu level 3</a>
                                                                    </li>
                                                                    <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>submenu level 3</a>
                                                                    </li>
                                                                    <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>submenu level 3</a>
                                                                    </li>
                                                                </ul>
                                                            </li>
                                                            <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>submenu level 2</a>
                                                            </li>
                                                        </ul>
                                                    </li>
                                                    <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>Third Link col-4</a>
                                                    </li>
                                                    <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>Fourth Link col-4</a>
                                                    </li>
                                                </ul>
                                            </li>
                                        </ul>
                                    </li>
                                </ul>
                            </li>
                            <li data-menu="dropdown" class="dropdown nav-item"><a href="#" data-toggle="dropdown" class="dropdown-toggle nav-link"><i class="la la-bookmark"></i><span>My Menu</span></a>
                                <ul class="dropdown-menu">
                                    <li class=" navigation-header"><span>Main</span></li>
                                    <li data-menu=""><a href="#" data-toggle="dropdown" class="dropdown-item">Second level</a>
                                    </li>
                                    <li data-menu=""><a href="#" data-toggle="dropdown" class="dropdown-item">Second level</a>
                                    </li>
                                    <li data-menu=""><a href="#" data-toggle="dropdown" class="dropdown-item">Second level</a>
                                    </li>
                                    <li data-menu=""><a href="#" data-toggle="dropdown" class="dropdown-item">Second level</a>
                                    </li>
                                    <li data-menu=""><a href="#" data-toggle="dropdown" class="dropdown-item">Second level</a>
                                    </li>
                                    <li data-menu=""><a href="#" data-toggle="dropdown" class="dropdown-item">Second level</a>
                                    </li>
                                    <li data-menu=""><a href="#" data-toggle="dropdown" class="dropdown-item">Second level</a>
                                    </li>
                                    <li data-menu=""><a href="#" data-toggle="dropdown" class="dropdown-item">Second level</a>
                                    </li>
                                    <li data-menu=""><a href="#" data-toggle="dropdown" class="dropdown-item">Second level</a>
                                    </li>
                                    <li data-menu=""><a href="#" data-toggle="dropdown" class="dropdown-item">Second level</a>
                                    </li>
                                    <li data-menu=""><a href="#" data-toggle="dropdown" class="dropdown-item">Second level</a>
                                    </li>
                                    <li data-menu=""><a href="#" data-toggle="dropdown" class="dropdown-item">Second level</a>
                                    </li>
                                    <li data-menu=""><a href="#" data-toggle="dropdown" class="dropdown-item">Second level</a>
                                    </li>
                                    <li data-menu=""><a href="#" data-toggle="dropdown" class="dropdown-item">Second level</a>
                                    </li>
                                    <li data-menu="dropdown-submenu" class="dropdown dropdown-submenu"><a href="#" data-toggle="dropdown" class="dropdown-item dropdown-toggle">Second level with child</a>
                                        <ul class="dropdown-menu">
                                            <li data-menu=""><a href="#" data-toggle="dropdown" class="dropdown-item">Third level</a>
                                            </li>
                                            <li data-menu="dropdown-submenu" class="dropdown dropdown-submenu"><a href="#" data-toggle="dropdown" class="dropdown-item dropdown-toggle">Third level with child</a>
                                                <ul class="dropdown-menu">
                                                    <li data-menu=""><a href="#" data-toggle="dropdown" class="dropdown-item">Fourth level</a>
                                                    </li>
                                                    <li data-menu=""><a href="#" data-toggle="dropdown" class="dropdown-item">Fourth level</a>
                                                    </li>
                                                </ul>
                                            </li>
                                        </ul>
                                    </li>
                                    <li data-menu=""><a href="#" data-toggle="dropdown" class="dropdown-item">Second level</a>
                                    </li>
                                </ul>
                            </li>
                            <li data-menu="dropdown" class="dropdown nav-item"><a href="#" data-toggle="dropdown" class="dropdown-toggle nav-link"><i class="la la-circle"></i><span>Menu levels</span></a>
                                <ul class="dropdown-menu">
                                    <li data-menu=""><a href="#" data-toggle="dropdown" class="dropdown-item">Second level</a>
                                    </li>
                                    <li data-menu="dropdown-submenu" class="dropdown dropdown-submenu"><a href="#" data-toggle="dropdown" class="dropdown-item dropdown-toggle">Second level with child</a>
                                        <ul class="dropdown-menu">
                                            <li data-menu=""><a href="#" data-toggle="dropdown" class="dropdown-item">Third level</a>
                                            </li>
                                            <li data-menu="dropdown-submenu" class="dropdown dropdown-submenu"><a href="#" data-toggle="dropdown" class="dropdown-item dropdown-toggle">Third level with child</a>
                                                <ul class="dropdown-menu">
                                                    <li data-menu=""><a href="#" data-toggle="dropdown" class="dropdown-item">Fourth level</a>
                                                    </li>
                                                    <li data-menu=""><a href="#" data-toggle="dropdown" class="dropdown-item">Fourth level</a>
                                                    </li>
                                                </ul>
                                            </li>
                                        </ul>
                                    </li>
                                    <li data-menu=""><a href="#" data-toggle="dropdown" class="dropdown-item">Second level</a>
                                    </li>
                                </ul>
                            </li>
                            <li data-menu="megamenu" class="dropdown mega-dropdown nav-item"><a href="#" data-toggle="dropdown" class="dropdown-toggle nav-link"><i class="la la-tv"></i><span>Mega Menu</span></a>
                                <ul class="dropdown-menu row">
                                    <li data-mega-col="col-md-4" class="col-md-4">
                                        <h6 data-toggle="dropdown" class="dropdown-menu-header text-uppercase"><i class="la la-cog"></i>Column 2 title
                                  </h6>
                                        <ul class="drilldown-menu">
                                            <li class="menu-list">
                                                <ul class="mega-menu-sub">
                                                    <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>First Link col-2</a>
                                                    </li>
                                                    <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>Second Link col-2</a>
                                                        <ul class="mega-menu-sub">
                                                            <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>submenu level 2</a>
                                                            </li>
                                                            <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>submenu level 2</a>
                                                            </li>
                                                            <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>submenu level 2 link</a>
                                                                <ul class="mega-menu-sub">
                                                                    <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>submenu level 3</a>
                                                                    </li>
                                                                    <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>submenu level 3</a>
                                                                    </li>
                                                                    <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>submenu level 3</a>
                                                                    </li>
                                                                    <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>submenu level 3</a>
                                                                    </li>
                                                                </ul>
                                                            </li>
                                                            <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>submenu level 2</a>
                                                            </li>
                                                        </ul>
                                                    </li>
                                                    <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>Third Link col-2</a>
                                                    </li>
                                                    <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>Fourth Link col-2</a>
                                                    </li>
                                                </ul>
                                            </li>
                                        </ul>
                                    </li>
                                    <li data-mega-col="col-md-4" class="col-md-4">
                                        <h6 data-toggle="dropdown" class="dropdown-menu-header text-uppercase"><i class="la la-cog"></i>Column 3 title
                                  </h6>
                                        <ul class="drilldown-menu">
                                            <li class="menu-list">
                                                <ul class="mega-menu-sub">
                                                    <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>First Link col-3</a>
                                                    </li>
                                                    <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>Second Link col-3</a>
                                                        <ul class="mega-menu-sub">
                                                            <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>submenu level 2</a>
                                                            </li>
                                                            <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>submenu level 2</a>
                                                            </li>
                                                            <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>submenu level 2 link</a>
                                                                <ul class="mega-menu-sub">
                                                                    <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>submenu level 3</a>
                                                                    </li>
                                                                    <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>submenu level 3</a>
                                                                    </li>
                                                                    <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>submenu level 3</a>
                                                                    </li>
                                                                    <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>submenu level 3</a>
                                                                    </li>
                                                                </ul>
                                                            </li>
                                                            <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>submenu level 2</a>
                                                            </li>
                                                        </ul>
                                                    </li>
                                                    <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>Third Link col-3</a>
                                                    </li>
                                                    <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>Fourth Link col-3</a>
                                                    </li>
                                                </ul>
                                            </li>
                                        </ul>
                                    </li>
                                    <li data-mega-col="col-md-4" class="col-md-4">
                                        <h6 data-toggle="dropdown" class="dropdown-menu-header text-uppercase"><i class="la la-cog"></i>Column 4 title
                                  </h6>
                                        <ul class="drilldown-menu">
                                            <li class="menu-list">
                                                <ul class="mega-menu-sub">
                                                    <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>First Link col-4</a>
                                                    </li>
                                                    <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>Second Link col-4</a>
                                                        <ul class="mega-menu-sub">
                                                            <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>submenu level 2</a>
                                                            </li>
                                                            <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>submenu level 2</a>
                                                            </li>
                                                            <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>submenu level 2 link</a>
                                                                <ul class="mega-menu-sub">
                                                                    <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>submenu level 3</a>
                                                                    </li>
                                                                    <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>submenu level 3</a>
                                                                    </li>
                                                                    <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>submenu level 3</a>
                                                                    </li>
                                                                    <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>submenu level 3</a>
                                                                    </li>
                                                                </ul>
                                                            </li>
                                                            <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>submenu level 2</a>
                                                            </li>
                                                        </ul>
                                                    </li>
                                                    <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>Third Link col-4</a>
                                                    </li>
                                                    <li><a href="#" class="dropdown-item"><i class="la la-caret-right"></i>Fourth Link col-4</a>
                                                    </li>
                                                </ul>
                                            </li>
                                        </ul>
                                    </li>
                                </ul>
                            </li>
                            <li data-menu="dropdown" class="dropdown nav-item"><a href="#" data-toggle="dropdown" class="dropdown-toggle nav-link"><i class="la la-circle"></i><span>Menu levels</span></a>
                                <ul class="dropdown-menu">
                                    <li data-menu=""><a href="#" data-toggle="dropdown" class="dropdown-item">Second level</a>
                                    </li>
                                    <li data-menu="dropdown-submenu" class="dropdown dropdown-submenu"><a href="#" data-toggle="dropdown" class="dropdown-item dropdown-toggle">Second level with child</a>
                                        <ul class="dropdown-menu">
                                            <li data-menu=""><a href="#" data-toggle="dropdown" class="dropdown-item">Third level</a>
                                            </li>
                                            <li data-menu="dropdown-submenu" class="dropdown dropdown-submenu"><a href="#" data-toggle="dropdown" class="dropdown-item dropdown-toggle">Third level with child</a>
                                                <ul class="dropdown-menu">
                                                    <li data-menu=""><a href="#" data-toggle="dropdown" class="dropdown-item">Fourth level</a>
                                                    </li>
                                                    <li data-menu=""><a href="#" data-toggle="dropdown" class="dropdown-item">Fourth level</a>
                                                    </li>
                                                </ul>
                                            </li>
                                        </ul>
                                    </li>
                                    <li data-menu=""><a href="#" data-toggle="dropdown" class="dropdown-item">Second level</a>
                                    </li>
                                </ul>
                            </li>
                            <li data-menu="dropdown" class="dropdown nav-item"><a href="#" data-toggle="dropdown" class="dropdown-toggle nav-link"><i class="la la-circle"></i><span>Menu levels</span></a>
                                <ul class="dropdown-menu">
                                    <li data-menu=""><a href="#" data-toggle="dropdown" class="dropdown-item">Second level</a>
                                    </li>
                                    <li data-menu="dropdown-submenu" class="dropdown dropdown-submenu"><a href="#" data-toggle="dropdown" class="dropdown-item dropdown-toggle">Second level with child</a>
                                        <ul class="dropdown-menu">
                                            <li data-menu=""><a href="#" data-toggle="dropdown" class="dropdown-item">Third level</a>
                                            </li>
                                            <li data-menu="dropdown-submenu" class="dropdown dropdown-submenu"><a href="#" data-toggle="dropdown" class="dropdown-item dropdown-toggle">Third level with child</a>
                                                <ul class="dropdown-menu">
                                                    <li data-menu=""><a href="#" data-toggle="dropdown" class="dropdown-item">Fourth level</a>
                                                    </li>
                                                    <li data-menu=""><a href="#" data-toggle="dropdown" class="dropdown-item">Fourth level</a>
                                                    </li>
                                                </ul>
                                            </li>
                                        </ul>
                                    </li>
                                    <li data-menu=""><a href="#" data-toggle="dropdown" class="dropdown-item">Second level</a>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </div>
                    <!-- /horizontal menu content-->
                </div>
            </div>
        </div>
    </div>
</section>
<!--/ Description -->
<!-- CSS Classes -->
<section id="css-classes" class="card">
    <div class="card-header">
        <h4 class="card-title">CSS Classes</h4>
        <a class="heading-elements-toggle"><i class="la la-ellipsis-v font-medium-3"></i></a>
        <div class="heading-elements">
            <ul class="list-inline mb-0">
                <li><a data-action="collapse"><i class="ft-minus"></i></a></li>
                <li><a data-action="reload"><i class="ft-rotate-cw"></i></a></li>
                <li><a data-action="close"><i class="ft-x"></i></a></li>
            </ul>
        </div>
    </div>
    <div class="card-content">
        <div class="card-body">
            <div class="card-text">
                <p>This table contains all classes which can be used in dark horizontal navigation. You can combine them as per horizontal navigation dark template requirements.</p>
                <p>All these options can be set via following classes:</p>
                <div class="table-responsive">
                    <table class="table table-hover">
                        <thead>
                            <tr>
                                <th>Classes</th>
                                <th>Description</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <th scope="row"><code>.navbar-dark</code></th>
                                <td>To set horizontal navigation dark color you need to add <code>.navbar-dark</code> class in horizontal navigation <code>&lt;div&gt;</code> tag. Refer HTML markup line no 13.</td>
                            </tr>
                            <tr>
                                <th scope="row"><code>.bg-[color]</code></th>
                                <td>
                                    <p>To set the dark horizontal navigation background color use <code>.bg-[color]</code> class where <code>[color]</code> is the value of your selected color from modern color palette. So for teal color background class will be <code>.bg-teal</code>. Refer HTML markup line no 2. Background color class is a optional if you don't it will take white background default.</p>
                                </td>
                            </tr>
                            <tr>
                                <th scope="row"><code>.bg-darken-[*]</code></th>
                                <td>
                                    <p>To set the selected background color darken use <code>.bg-darken-[*]</code> class where <code>[*]</code> is the value between '1-5' of your selected darken color from modern color palette. So for color darken 4 background class will be <code>.bg-darken-4</code>. Refer HTML markup line no 2. Background darken color class is a optional if you don't it will take white background default.</p>
                                    <p><code>.bg-darken-[*]</code> class will work only if you have used <code>.bg-[color]</code>.</p>
                                </td>
                            </tr>
                            <tr>
                                <th scope="row"><code>.border-[color]</code></th>
                                <td>
                                    <p>To set the dark horizontal navigation border color use <code>.border-[color]</code> class where <code>[color]</code> is the value of your selected color from modern color palette. So for teal color border class will be <code>.bg-teal</code>. Refer HTML markup line no 2. Border color class is a optional.</p>
                                </td>
                            </tr>
                            <tr>
                                <th scope="row"><code>.border-darken-[color]</code></th>
                                <td>
                                    <p>To set the selected border color darken use <code>.border-darken-[*]</code> class where <code>[*]</code> is the value between '1-5' of your selected darken color from modern color palette. So for color darken 4 border class will be <code>.border-darken-4</code>. Refer HTML markup line no 2. Border darken color class is a optional.</p>
                                    <p><code>.border-darken-[*]</code> class will work only if you have used <code>.border-[color]</code>.</p>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</section>
<!--/ CSS Classes -->
<!-- HTML Markup -->
<section id="html-markup" class="card">
    <div class="card-header">
        <h4 class="card-title">HTML Markup</h4>
        <a class="heading-elements-toggle"><i class="la la-ellipsis-v font-medium-3"></i></a>
        <div class="heading-elements">
            <ul class="list-inline mb-0">
                <li><a data-action="collapse"><i class="ft-minus"></i></a></li>
                <li><a data-action="reload"><i class="ft-rotate-cw"></i></a></li>
                <li><a data-action="close"><i class="ft-x"></i></a></li>
            </ul>
        </div>
    </div>
    <div class="card-content">
        <div class="card-body">
            <div class="card-text">
                <p>This section contains HTML Markup to create dark horizontal navigation. This markup define where to add css classes to make horizontal navigation dark.</p>
                <ul>
                    <li><span class="text-bold-600">Line no 13:</span> Contain the <code>.navbar-dark</code> class for adjusting horizontal navigation color dark. It has also <code>.bg-teal</code> & <code>bg-darken-5</code> to set darken background color and <code>border-teal</code> & <code>border-darken-4</code> to set darken border.</li>
                </ul>
                <pre data-line="13" class="language-markup">
        <code class="language-markup">
              &lt;!DOCTYPE html&gt;
              &lt;html lang="en"&gt;
                &lt;head&gt;&lt;/head&gt;
                &lt;body data-menu="vertical-menu" class="vertical-layout vertical-menu 2-column menu-expanded"&gt;

                  &lt;!-- START Navbar--&gt;
                  &lt;nav role="navigation" class="header-navbar navbar-expand-sm navbar navbar-with-menu fixed-bottom navbar-dark navbar-shadow navbar-border"&gt;
                      ...
                  &lt;/nav&gt;
                  &lt;!-- END Navbar--&gt;

                  &lt;!-- START Horizontal navigation --&gt;
                  &lt;div role="navigation" data-menu="menu-wrapper" class="header-navbar navbar-expand-sm navbar navbar-horizontal navbar-dark navbar-shadow border-grey border-darken-2"&gt;
                      ...
                  &lt;/div&gt;
                  &lt;!-- END Horizontal navigation--&gt;

                  &lt;!-- BEGIN Content--&gt;
                  &lt;div class="content app-content"&gt;
                      &lt;div class="content-wrapper"&gt;
                          &lt;!-- content header--&gt;
                          &lt;div class="content-header row"&gt;
                              ...
                          &lt;/div&gt;
                          &lt;!-- content header--&gt;

                          &lt;!-- content right--&gt;
                          &lt;div class="content-right"&gt;
                              ...
                          &lt;/div&gt;
                          &lt;!-- content right--&gt;

                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;!-- END Content--&gt;

                  &lt;!-- START FOOTER DARK--&gt;
                  &lt;footer class="footer footer-dark"&gt;
                      ...
                  &lt;/footer&gt;
                  &lt;!-- START FOOTER DARK--&gt;

                &lt;/body&gt;
              &lt;/html&gt;
        </code>
        </pre>
            </div>
        </div>
    </div>
</section>
<!--/ HTML Markup -->
<!-- PUG Code -->
<section id="pug-configuration" class="card">
    <div class="card-header">
        <h4 class="card-title">PUG Configuration</h4>
        <a class="heading-elements-toggle"><i class="la la-ellipsis-v font-medium-3"></i></a>
        <div class="heading-elements">
            <ul class="list-inline mb-0">
                <li><a data-action="collapse"><i class="ft-minus"></i></a></li>
                <li><a data-action="reload"><i class="ft-rotate-cw"></i></a></li>
                <li><a data-action="close"><i class="ft-x"></i></a></li>
            </ul>
        </div>
    </div>
    <div class="card-content">
        <div class="card-body">
            <div class="card-text">
                <p>Modern Admin use PUG as template engine to generate pages and whole template quickly using node js, for getting start with PUG usage & template generating process please refer template documentation.</p>
                <h5 class="card-title mt-2">PUG Variables</h5>
                <p>This table contains required PUG variables to generate horizontal navigation layout.</p>
                <div class="table-responsive">
                    <table class="table table-hover">
                        <thead>
                            <tr>
                                <th>Block</th>
                                <th>Variable</th>
                                <th>Datatype</th>
                                <th>Value</th>
                                <th>Description</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <th scope="row"><code>horizontalMenuConfig</code></th>
                                <td><code>menuColor</code></td>
                                <td><code>string</code></td>
                                <td><code>'navbar-dark'</code></td>
                                <td><code>horizontalMenuConfig</code> block has a <code>menuColor</code> variable, it contains horizontal navigation specific classes in that you need to add <code>navbar-dark</code>. It also contain optional classes like <code>bg-teal bg-darken-5 border-teal border-darken-4</code></td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <h5 class="card-title mt-2">PUG Code</h5>
                <p>To generate horizontal navigation dark page or template, you need to use following PUG code.</p>
                <ul>
                    <li><span class="text-bold-600">Line no 20-21:</span>  Set horizontal navigation dark class to <code>menuColor</code> variable value as <code>'navbar-dark'</code> in <code>horizontalMenuConfig</code> block, it contains horizontal navigation specific classes in that you need to add <code>navbar-dark</code>. It also contain optional classes like <code>bg-teal bg-darken-5 border-teal border-darken-4</code>.</li>
                    <li><span class="text-bold-600">Line no 27-28:</span> <code>content</code> block has content section html file included <code>include ../contents/horizontal-dark-navigation.html</code>, which can be customizable on page level.</li>
                </ul>
                <p>If you want to use this layout on page level you need to define it on page it self. This template has one example pug file for dark horizontal navigation <code>horizontal-dark-navigatioin.pug</code>, however you can use it on template level but it will generate whole template horizontal navigation dark.</p>
                <pre data-line="20-21, 27-28" data-line-offset="11" class="language-pug">
              <code class="language-pug">
                block pageVars
                    - var pageTitle    = "Navigation Dark"
                    - var pageSubTitle = "Horizontal dark navigation"
                    - var description  = "The horizontal dark navigation, dark template usage & customization option."
                    - var activeMenu   = "horizontal-nav-dark"

                extends template

                append horizontalMenuConfig
                    - var horizontalMenuColor = "navbar-dark"

                append breadcrumbs
                    +breadcrumbs([{url:"index.html",name:"Home"},{url:"#",name:"Horizontal Navigation"}, {name:"Navigation Dark"}])

                //- Include page content in page block
                append content
                    include ../contents/horizontal-nav-dark.html

                //- Vendor CSS
                //------------------------------
                //- Add Vendor specific CSS
                append vendorcss

                //- Page CSS
                //------------------------------
                //- Add custom page specific CSS
                append pagecss

                //- Vendor JS
                //------------------------------
                //- Add vendor specific JS
                append vendorjs

                //- Page JS
                //------------------------------
                //- Add custom page specific JS
                append pagejs
              </code>
              </pre>
            </div>
        </div>
    </div>
</section>
<!--/ PUG Code -->
